<template>
    <div class="home">
        <myhead :title="title"></myhead>
        <van-tabs v-model:active="num" @click-tab="onClickTab(active.list.id)" swipeable>
            <van-tab :to="item.path" :click-tab="pathGo" v-for="item in active.list" :title="item.title"> </van-tab>
        </van-tabs>

        <router-view></router-view>
    </div>
</template>

<script setup>
import Myhead from "../../components/Myhead.vue";
import { useRouter } from "vue-router";
import { Tab, Tabs, Swipe, SwipeItem } from "vant";
import { ref, reactive, defineComponent, onMounted } from "vue";
defineComponent({
    Myhead,
});
let title = ref("首页");
const router = useRouter();
let num = ref(0);
const active = reactive({
    list: [
        { id: 0, title: "国内", path: "/" },

        { id: 1, title: "图片", path: "/img" },
        { id: 2, title: "排行", path: "/rank" },

        { id: 3, title: "最新", path: "/new" },
    ],
});
// console.log(active.value);
const onClickTab = (x) => {
    // console.log(x);
};
onMounted(() => {
    console.log(router.currentRoute.value.path);
    let dd = active.list.findIndex((item) => {
        return item.path == router.currentRoute.value.path;
    });
    num.value = dd;
    // console.log(dd);
});
const pathGo = () => {
    // console.log(active.value);
    num = active.value;
};
</script>
<style lang="scss">
.home .van-tab__panel {
    padding: 10px;
}
.van-tabs__line {
    background-color: #383838;
}
</style>
